import React from 'react'


import './CustomButton.css'
// constants
import constants from "../../utils/constants"
const {themeColor} = constants
const CustomButton = (props) => {

    const size = props.size || 'large'
    const color = props.color || '#fff'
    const bgColor = props.bg || themeColor
    const inline = props.inline
    const shadow = props.shadow || ''
    const disabled = props.disabled
    // const btnWidth = props.btnWidth
    // const style = props.style
    const border = props.border
    const extraStyle = props.extrastyle

    const sizeMapper = {
        large: 'custom-btn-lg',
        mid: 'custom-btn-mid',
        small: 'custom-btn-s',
        xs: 'custom-btn-xs',
    }
    const btnStyle = {
        display: inline ? 'inline-block' : '',
        background: disabled ? '#E8E8E8' : bgColor,
        color: color,
        boxShadow: shadow ? shadow : '',
        border: border,
        ...extraStyle
    }
    return (
        <div
            className={sizeMapper[size]}
            style={btnStyle}
            {...props}
        >
            {props.children}
        </div>
    )
}

export default CustomButton
